<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="father">
  father
  <div id="son">
    son
  </div>

</div>
<!-- case1: 事件冒泡是什么 -->
<script>
  // 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

  // son.onclick = () => alert('son');
  // father.onclick = () => alert('father');

  //点击son你会发现 不仅alert('son')触发了 alert('father')也触发了
  //这就是冒泡

  //那么如果不想触发冒泡呢？ 我们也可以手动取消

  son.onclick = (e) => {
    e.stopPropagation(); //← 取消冒泡
    alert('son')
  };
  father.onclick = () => alert('father');

</script>
</body>
</html>
